<template>
  <div class="template-manage w-full h-full display-flex-column">
    <a-tabs v-model="activeKey" hide-add type="editable-card" @edit="onEdit">
      <a-tab-pane
        v-for="pane in panes"
        :key="pane.key"
        :tab="pane.title"
        :closable="pane.closable"
      >
        <div v-if="pane.title === '模板管理'">
          <div class="btn-box" style="padding-top: 20px">
            <a-button type="primary" class="m-r-sm" @click="handlerCreateItem">新增</a-button>
            <a-button type="primary m-r-sm" @click="loadData">刷新</a-button>
            <a-button type="primary m-r-sm" @click="testMock">测试</a-button>
          </div>
          <div class="w-full" style="height: 20px"></div>
          <div class="table-box flex-1" style="overflow: hidden">
          <a-table
            class="dist-box-table"
            bordered
            :rowClassName="setRowClassName"
            :customRow="customRow"
            :loading="table.loading"
            :rowKey="(record, index)=>index"
            :columns="table.columns"
            :data-source="table.dataSource"
            :pagination="table.pagination"
            :scroll="{ x: false, y: 'calc(100% - 70px)' }"
          >
            <template slot="index" slot-scope="text,record,index">
              <div>{{ index + 1 }}</div>
            </template>
            <span slot="operate" slot-scope="text,record">
              <div class="display-flex">
                <a-button type="default" @click="handlerEditRecord(record)">
                  编辑
                </a-button>
                <a-button class="m-l-md" type="danger" @click="handlerRemoveRecord(record)">
                  删除
                </a-button>
              </div>
            </span>
          </a-table>
          </div>
        </div>
          <TemplateDetail v-if="pane.template" :template="pane.template" @updatePaneTitle="updatePaneTitle"></TemplateDetail>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
  import PageInitFn from '@/api/pageInitFn'
  import dataQualityInspectionService from '@/api/dataQualityInspectionService'
  import TemplateDetail from "./TemplateDetail";
export default {
  name: 'TemplateManage',
  data () {
    return {
      table: {
        columns: [],
        dataSource: [],
        loading: false,
        rowSelection: {
          selectedRowKeys: [],
          selectedRows: [],
          onChange: (selectedRowKeys, selectedRows) => {
            this.table.rowSelection.selectedRowKeys = selectedRowKeys
            this.table.rowSelection.selectedRows = selectedRows
          }
        },
        pagination: {
          pageSize: 200, // 默认每页显示数量
          total: 0,
          current: 1,
          showSizeChanger: true, // 显示可改变每页数量
          pageSizeOptions: ['10', '20', '50', '100', '200', '500'], // 每页数量选项
          showTotal: (total) => `共${total}条数据`, // 显示总数
          onShowSizeChange: (current, pageSize) => {
            this.filter.pageIndex = 1
            this.filter.pageSize = pageSize
            this.table.pagination.pageSize = pageSize
            this.loadData(this.filterText)
          },
          onChange: (current, pageSize) => {
            this.filter.pageIndex = current
            this.filter.pageSize = pageSize
            this.table.pagination.current = current
            this.table.pagination.pageSize = pageSize
            this.loadData(this.filterText)
          }
        }
      },
      filter: {
        pageIndex: 1,
        pageSize: 200
      },
      activeKey: '1',
      panes: [
        {
          title: '模板管理',
          content: '',
          key: '1',
          closable: false
        }
      ]
    }
  },
  components: {
    TemplateDetail
  },
  created () {
    this.pageInitFn = new PageInitFn(this)
    this.pageInitFn.created()
  },
  mounted () {
    this.pageInitFn.mounted()
  },
  methods: {
    onEdit (targetKey, action) {
      this[action](targetKey)
    },
    remove (targetKey) {
      let activeKey = this.activeKey
      let lastIndex
      this.panes.forEach((pane, i) => {
        if (pane.key === targetKey) {
          lastIndex = i - 1
        }
      })
      const panes = this.panes.filter((pane) => pane.key !== targetKey)
      if (panes.length && activeKey === targetKey) {
        if (lastIndex >= 0) {
          activeKey = panes[lastIndex].key
        } else {
          activeKey = panes[0].key
        }
      }
      this.panes = panes
      this.activeKey = activeKey
    },
    handlerCreateItem () {
      const _this = this
      this.$dialog({
        title: '新增模板',
        content: () => import('./dialog/addTemplateDialog'),
        width: 400,
        centered: true,
        maskClosable: false,
        on: {
          ok (ctl) {
            const dialogCtl = ctl.getDialogCtl()
            const valid = dialogCtl.submit()
            if (valid) {
              _this.doCreateTemplate(dialogCtl.form)
              ctl.closeDialog()
            }
          }
        }
      })
    },
    async doCreateTemplate (form) {
      await dataQualityInspectionService.createDataQualityConfig(form)
      await this.loadData()
    },
    setRowClassName (record, index) {
      return this.pageInitFn.setRowClassName(record, 'id')
    },
    customRow (record, index, key) {
      return this.pageInitFn.customRow(record, 'id')
    },
    async loadData (filterText = null) {
      this.filterText = filterText || null
      await this.pageInitFn.loadData()
    },
    async testMock () {
      console.log('1')
      const data = await dataQualityInspectionService.testMock('1')
      console.log(data)
      console.log('2')
    },
    handlerEditRecord (record) {
      const panes = this.panes
      let addPane = true
      for (let i = 0; i < panes.length; i++) {
        if (panes[i].template && panes[i].template.id === record.id) {
          addPane = false
          this.activeKey = panes[i].key
          break
        }
      }
      if (addPane) {
        panes.push({
          title: record.name,
          content: '',
          key: record.id,
          template: record
        })
        this.panes = panes
        this.activeKey = record.id
      }
    },
    updatePaneTitle (data) {
      this.loadData()
      this.panes.forEach(pane => {
        if (pane.key === data.id) {
          pane.title = data.name
        }
      })
    },
    handlerRemoveRecord (record) {
      this.$confirm({
        title: '提示',
        content: '确认执行删除操作，删除后模板不可恢复！',
        okText: '确认',
        cancelText: '取消',
        onOk: () => {
          dataQualityInspectionService.deleteConfigById({
            configId: record.id
          }).then(() => {
            this.loadData()
            this.$message.success('删除成功')
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.template-manage{
  background-color: white;
  padding: 10px;
  overflow: hidden;
  .ant-tabs{
    height: 100%;
  }
  /deep/.ant-tabs .ant-tabs-top-content, .ant-tabs .ant-tabs-bottom-content{
    height: calc(100% - 50px);
  }
  .ant-tabs-tabpane-active{
    height: 100%;
  }
}
</style>
